<template>
  <div class="viewer_utils">
    <div class="viewer_utils-content">
      <div class="viewer_utils-icon" @click="onZoomOut">
        <tj-icon type="tj-icon-samo" size="medium"></tj-icon>
      </div>
      <tj-tooltip content="原始大小" destroy-on-close placement="top" show-arrow>
        <div class="viewer_utils-icon" @click="onReset">
          <tj-icon type="tj-icon-dengbi" size="medium"></tj-icon>
        </div>
      </tj-tooltip>
      <div class="viewer_utils-icon" @click="onZoomIn">
        <tj-icon type="tj-icon-magnify" size="medium"></tj-icon>
      </div>
      <tj-line layout="vertical" />
      <tj-tooltip content="左旋转" destroy-on-close placement="top" show-arrow>
        <div class="viewer_utils-icon" @click="onRotateLeft">
          <tj-icon type="tj-icon-rotation-left" size="medium"></tj-icon>
        </div>
      </tj-tooltip>
      <tj-tooltip content="右旋转" destroy-on-close placement="top" show-arrow>
        <div class="viewer_utils-icon" @click="onRotateRight">
          <tj-icon type="tj-icon-rotation-right" size="medium"></tj-icon>
        </div>
      </tj-tooltip>
    </div>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue';

const emits = defineEmits(['onZoomIn', 'onReset', 'onZoomOut', 'onRotate']);
function onZoomIn() {
  emits('onZoomIn');
}
function onReset() {
  emits('onReset');
}
function onZoomOut() {
  emits('onZoomOut');
}
function onRotateLeft() {
  emits('onRotate', 'left');
}
function onRotateRight() {
  emits('onRotate', 'right');
}
</script>
<style lang="less" scoped>
.viewer_utils {
  width: 100%;
  position: absolute;
  bottom: 55px;
  z-index: 1;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  .viewer_utils-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    line-height: 100%;
    background-color: #000;
    border-radius: 10px;
    padding: 0 4px;
    .viewer_utils-icon {
      margin: 0 4px;
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      cursor: pointer;
      color: #fff;
      &:hover {
        background: #363c44;
      }
    }
  }
}
</style>
